<template>
    <a-modal v-model:open="open" title="广告详情" :footer="null">
            <div class="">
                <div class="my-[20px]">
                    <a-image :src="imgUrl(detail.img_url)" :height="200" />
                </div>
                <div class="flex mb-[20px] items-start">
                    <span class="text-sm text-[#999999] w-[100px]">广告主题</span>
                    <span class="text-sm text-[#000000] w-[300px] w-[200px]">{{ detail.title }}</span>
                </div>
                <div class="flex mb-[20px] items-start" v-if="detail.is_jump">
                    <span class="text-sm text-[#999999] w-[100px]">跳转地址</span>
                    <span class="text-sm text-[#000000] w-[300px]">{{ detail.jump_url }}</span>
                </div>
                <div class="flex mb-[20px] items-start">
                    <span class="text-sm text-[#999999] w-[100px]">开始时间</span>
                    <span class="text-sm text-[#000000] w-[300px]">{{ detail.start_time }}</span>
                </div>
                <div class="flex mb-[20px] items-start">
                    <span class="text-sm text-[#999999] w-[100px]">结束时间</span>
                    <span class="text-sm text-[#000000] w-[300px]">{{ detail.end_time }}</span>
                </div>
                <div class="flex mb-[20px] items-start">
                    <span class="text-sm text-[#999999] w-[100px]">创建时间</span>
                    <span class="text-sm text-[#000000] w-[300px]">{{ detail.created_at }}</span>
                </div>
            </div>
        </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { imgUrl } from '@/utils/libs/common';

const open = ref<boolean>(false);

// 打开详情
const detail = reactive({
    title: '',
    key: '',
    img_url: '',
    status: '',
    is_jump: '',
    jump_url: '',
    start_time: '',
    end_time: '',
    created_at: '',
});

const setFormData = (data: any) => {
    Object.assign(detail, data);
}

const showModal = (data: any) => {
    open.value = true;
    setFormData(data);
}

defineExpose({
    showModal,
})
</script>